<template>
	<view class="content">
		<!-- 九宫格 -->
		<view class="item" v-for="(item,index) in listData" :key="index" @click="$emit('selectItem',item)" >
	 
				<image :src="item.pic"  mode="aspectFill" class="image"></image>
	 
			<text class="text">{{item.name}}</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:['listData'],
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	.content{
		display: flex;
		flex-wrap: wrap;
		justify-content:flex-start ;
		align-items: center;
		background-color: #FFFFFF;
	}
	.item{
		width: 150rpx;
		height: 170rpx;
		/* background-color: #007AFF; */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
	}

	.item .image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 30px;
	}
	.item .text{
		font-size: 26rpx;
		font-weight: 400;
		margin-top: 10rpx;
	}
	
	

</style>
